<template>
  <div>
    <div class="nav_sta">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item><a href="/">资产维护</a></el-breadcrumb-item>
        <el-breadcrumb-item>统计报表</el-breadcrumb-item>
        <el-breadcrumb-item>设备报表类型</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!-- 数据表 -->
    <div class="exc">
      <div class="exc_one">
        <div ref="main" style="width: 100%; height: 100%"></div>
      </div>
      <div class="exc_two">
        <div ref="text" style="width: 100%; height: 100%"></div>
      </div>
      <div class="exc_second">
        <div ref="cont" style="width: 100%; height: 100%"></div>
      </div>
    </div>
    <!-- 表格 -->
    <div class="cont_table">
      <div class="cont_table_te">
        <!-- 资产输入框 -->
        <span style="padding-left: 20px; padding-right: 20px">资产类型</span>
        <el-select v-model="value2" multiple collapse-tags placeholder="请选择" style="width: 240px">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
        <!-- 时间 -->
        <span style="padding-left: 20px; padding-right: 20px">时间选择</span>
        <el-time-picker
          v-model="value1"
          is-range
          range-separator="-"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
        />
        <!-- 按钮 -->
        <el-button color="#00a468" class="btN">
          <el-icon>
            <Search />
          </el-icon>
          查询
        </el-button>
        <el-button class="btN"> 重置 </el-button>
        <el-button color="#00a468" class="btN"> 导出 </el-button>
      </div>
      <div class="cont_table_tx_es">
        <span style="font-size: 17px; font-weight: 500">查询结果列表</span>
        <el-table
          ref="multipleTableRef"
          :data="tableData"
          :header-cell-style="{
            backgroundColor: '#07b274',
            height: '55px',
            color: '#fff',
            borderLeft: '1px solid #fff',
            fontSize: '12px',
            width: '220px'
          }"
          :cell-style="{ height: '50px' }"
          :row-class-name="tableRowClassName"
          style="width: 100%; margin-top: 10px"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55" />
          <el-table-column label="序号" width="120">
            <template #default="scope">{{ scope.row.date }}</template>
          </el-table-column>
          <el-table-column property="el" label="资产类型" width="160" />
          <el-table-column property="address" label="资产数量" width="160" />
          <el-table-column property="tl" label="任务数量" width="160" />
          <el-table-column property="dl" label="巡检数量" width="160" />
          <el-table-column property="dt" label="维保数量" width="160" />
          <el-table-column property="nt" label="维修数量" width="160" />
          <el-table-column property="al" label="故障数" width="160" />
          <el-table-column property="ts" label="完好率" width="160" />
          <el-table-column property="date" label="统计时间" width="240" />
        </el-table>
        <div class="demo-pagination-block">
          <el-pagination
            v-model:current-page="currentPage4"
            v-model:page-size="pageSize4"
            :page-sizes="[100, 200, 300, 400]"
            :small="small"
            :disabled="disabled"
            :background="background"
            layout="total, sizes, prev, pager, next, jumper"
            :total="400"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ElTable } from 'element-plus'
import { ref, onMounted } from 'vue'
//  按需引入 echarts
import * as echarts from 'echarts'
import { Search } from '@element-plus/icons-vue'
const main = ref() // 使用ref创建虚拟DOM引用，使用时用main.value
const text = ref()
const cont = ref()
const value2 = ref([])
// 表格属性
const multipleTableRef = ref<InstanceType<typeof ElTable>>()
const multipleSelection = ref<User[]>([])
const handleSelectionChange = (val: User[]) => {
  multipleSelection.value = val
}
// 分页数据
const currentPage4 = ref(4)
const pageSize4 = ref(100)
const small = ref(false)
const background = ref(false)
const disabled = ref(false)
const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
}
// 表格数据类型
interface User {
  date: string
  name: string
  address: string
  el: string
  tl: string
  dl: string
  dt: string
  nt: string
  al: string
  ts: string
}
onMounted(() => {
  init()
})
function init() {
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(main.value)
  var myChart2 = echarts.init(text.value)
  var myChart3 = echarts.init(cont.value)
  // 指定图表的配置项和数据
  var option = {
    title: {
      text: '工单占比统计',
      subtext: '统计时间',
      left: 'right'
    },
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'vertical',
      left: 'left'
    },
    series: [
      {
        name: '工单',
        type: 'pie',
        radius: '50%',
        data: [
          { value: 20, name: '巡检工单' },
          { value: 80, name: '维保工单' }
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  }
  var option2 = {
    title: {
      text: '工单总览',
      left: '20px',
      textStyle: {
        color: '#436EEE',
        fontSize: 14
      }
    },
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      itemWidth: 10,
      itemHeight: 10,
      data: ['巡检', '维保']
    },
    xAxis: {
      data: ['视频监控', '门禁系统', '照明系统', '空调系统', '电梯系统', '暖通系统', '广播系统', '其他系统'],
      splitLine: {
        show: true
      }
    },
    yAxis: {
      type: 'value',
      splitLine: {
        show: false
      }
    },
    series: [
      {
        name: '巡检',
        type: 'bar',
        stack: '使用情况',
        data: [5, 20, 36, 10, 10, 20, 3, 10],
        itemStyle: {
          normal: { color: '#FF8849' }
        }
      },
      {
        name: '维保',
        type: 'bar',
        stack: '使用情况',
        data: [40, 22, 18, 35, 42, 40, 10, 34],
        itemStyle: {
          normal: { color: '#3FBB49' }
        }
      }
    ]
  }
  var option3 = {
    tooltip: {
      trigger: 'item'
    },
    legend: {
      top: '5%',
      left: 'center'
    },
    series: [
      {
        name: '状态',
        type: 'pie',
        radius: ['40%', '70%'],
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 20,
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        },
        data: [
          { value: 20, name: '未完成' },
          { value: 80, name: '已完成' }
        ]
      }
    ]
  }
  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option)
  myChart2.setOption(option2)
  myChart3.setOption(option3)
}
const options = [
  {
    value: '1',
    label: '视频监控'
  },
  {
    value: '2',
    label: '门禁系统'
  },
  {
    value: '3',
    label: '照明系统'
  },
  {
    value: '4',
    label: '空调系统'
  },
  {
    value: '5',
    label: '电梯系统'
  }
]
const value1 = ref<[Date, Date]>([new Date(2022, 9, 10, 8, 40), new Date(2022, 9, 10, 9, 40)])
const tableData: User[] = [
  {
    date: '2022-12-13',
    name: '空调系统',
    address: '500',
    el: '空调系统',
    tl: '100',
    dl: '45',
    dt: '35',
    nt: '25',
    al: '10',
    ts: '98%'
  },
  {
    date: '2022-12-13',
    name: '照明系统',
    address: '500',
    el: '空调系统',
    tl: '100',
    dl: '45',
    dt: '35',
    nt: '25',
    al: '10',
    ts: '98%'
  },
  {
    date: '2022-12-13',
    name: '监控系统',
    address: '500',
    el: '空调系统',
    tl: '100',
    dl: '45',
    dt: '35',
    nt: '25',
    al: '10',
    ts: '98%'
  },
  {
    date: '2022-12-13',
    name: '电梯系统',
    address: '500',
    el: '空调系统',
    tl: '100',
    dl: '45',
    dt: '35',
    nt: '25',
    al: '10',
    ts: '98%'
  },
  {
    date: '2022-12-13',
    name: '照明系统',
    address: '500',
    el: '空调系统',
    tl: '100',
    dl: '45',
    dt: '35',
    nt: '25',
    al: '10',
    ts: '98%'
  },
  {
    date: '2022-12-13',
    name: '空调系统',
    address: '500',
    el: '空调系统',
    tl: '100',
    dl: '45',
    dt: '35',
    nt: '25',
    al: '10',
    ts: '98%'
  },
  {
    date: '2022-12-13',
    name: '空调系统',
    address: '500',
    el: '空调系统',
    tl: '100',
    dl: '45',
    dt: '35',
    nt: '25',
    al: '10',
    ts: '98%'
  }
]
const tableRowClassName = ({ row, rowIndex }: { row: any; rowIndex: number }) => {
  if (rowIndex % 2 === 1) {
    return 'warning-row' // 类名
  } else {
    return '' // 类名
  }
}
</script>

<style scoped lang="scss">
.exc {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
  height: 320px;
  width: 100%;
  & .exc_one {
    background-color: #fff;
    height: 320px;
    width: 32.5%;
  }
  & .exc_two {
    background-color: #fff;
    height: 320px;
    width: 32.5%;
  }
  & .exc_second {
    background-color: #fff;
    height: 320px;
    width: 32.5%;
  }
}
.cont_table {
  margin-top: 20px;
  background-color: #fff;
  height: 600px;
  width: 100%;
  & .cont_table_te {
    height: 40px;
    width: 100%;
    padding-top: 20px;
  }
  & .cont_table_tx_es {
    margin-top: 20px;
    margin-left: 20px;
  }
}
.btN {
  display: inline-block;
  padding-right: 20px;
  margin-left: 30px;
}
:deep(.warning-row) {
  background-color: #e5f7f1;
}
.demo-pagination-block + .demo-pagination-block {
  margin-top: 10px;
}
.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}
</style>
